<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>
    #required_css
</head>

<body>#loading
<div class="app $!layout">
    <section class="layout">
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <!-- 主体操作栏 -->
                <header class="header navbar">
                    <!-- 左按钮区 -->
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/bi/table"><i class="ti-angle-left"></i>
                            Back</a>
                    </div>
                </header>
                <div class="content-wrap">
                    <div class="wrapper">
                        <section class="panel pt20">
                            <form id="tableAlterForm" role="form" class="form-horizontal parsley-form"
                                  data-parsley-validate action="$!basePath/bi/table/alter/do" method="post">
                                <input type="hidden" name="tableName" value="$!table.name"/>
                                <input type="hidden" name="columns"/>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-3 control-label">Name</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" name="name"
                                                       data-parsley-required="true" value="$!table.name"
                                                       readonly="readonly">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">Schema</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" name="schema"
                                                       readonly="readonly" value="$!table.schema">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">Catalog</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" name="catalog"
                                                       readonly="readonly" value="$!table.catalog">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-1 control-label">Description</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" name="description"
                                                       value="$!table.description">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row p15">
                                    <section class="panel">
                                        <div class="panel-heading">
                                            <b>Columns</b>
                                            <div class="pull-right">
                                                <button type="button" class="btn btn-default" onclick="addColumn()"><i
                                                        class="fa fa-plus"></i> Add Column
                                                </button>
                                            </div>
                                        </div>
                                        <div class="panel-body">
                                            <table id="columns" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th class="col-lg-2">Field Name</th>
                                                    <th class="col-lg-2">DataType</th>
                                                    <th class="col-lg-1">Length</th>
                                                    <th>Default</th>
                                                    <th>PK?</th>
                                                    <th>Not Null?</th>
                                                    <th>Auto Incr?</th>
                                                    <th class="col-lg-2">Comment</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                #foreach($!col in $!table.columns)
                                                <tr>
                                                    <td>
                                                        <input type="text" class="form-control" name="column.name"
                                                               data-parsley-required="true" value="$!col.name"/>
                                                    </td>
                                                    <td>
                                                        <select class="form-control" name="columnType"
                                                                onchange="changeType(this)">
                                                            #foreach($!obj in $!columnTypes)
                                                            #if(!$!obj.name.startsWith("_"))
                                                            <option value="$!obj.name" #if($!col.type==
                                                                    $!obj.name)selected="selected" #end>$!obj.name
                                                            </option>
                                                            #end
                                                            #end
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="columnSize"
                                                               value="$!col.size"/>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="columnDefault"
                                                               value="$!col.defaultValue"/>
                                                    </td>
                                                    <td class="text-center" style="vertical-align: middle;"><input
                                                            class="icheck" type="checkbox" name="columnPk"
                                                            #if($!col.primaryKey)checked="checked" #end/></td>
                                                    <td class="text-center" style="vertical-align: middle;"><input
                                                            class="icheck" type="checkbox" name="columnNotNull"
                                                            #if($!col.required)checked="checked" #end/></td>
                                                    <td class="text-center" style="vertical-align: middle;"><input
                                                            class="icheck" type="checkbox" name="columnAutoIncr"
                                                            #if($!col.autoIncrement)checked="checked" #else
                                                            disabled="disabled" #end/></td>
                                                    <td>
                                                        <input type="text" class="form-control" name="columnComment"/>
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-default" type="button"
                                                                onclick="removeColumn(this)"><i class="fa fa-close"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                                #end
                                                </tbody>
                                            </table>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                    <div class="form-group text-center">
                                        <label></label>
                                        <div>
                                            <button class="btn btn-primary btn-block btn-lg btn-parsley" type="button"
                                                    onclick="getColumns()" data-loading-text="Submit...">Submit
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </section>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
        </section>
    </section>
</div>
#required_js

<!-- 本页面脚本 -->
<script src="$!basePath/framework/js/form/form.js"></script>
<script src="$!basePath/framework/js/view/toast.js"></script>
<script src="$!basePath/framework/js/form/validator.js"></script>

<script type="text/javascript">
    var template;
    function addColumn() {
        $("#columns>tbody").append(template.clone());
    }
    function removeColumn(obj) {
        $(obj).parents("tr").remove();
    }
    function getColumns() {
        var trs = $("#columns>tbody>tr");
        var data = [];
        trs.each(function (i, tr) {
            tr = $(tr);
            var obj = {};
            obj.name = tr.find("td:eq(0)>input").val();
            obj.type = tr.find("td:eq(1)>select").val();
            obj.size = tr.find("td:eq(2)>input").val();
            obj.def = tr.find("td:eq(3)>input").val();
            obj.pk = tr.find("td:eq(4)>input").is(":checked");
            obj.notNull = tr.find("td:eq(5)>input").is(":checked");
            obj.autoIncr = tr.find("td:eq(6)>input").is(":checked");
            obj.comment = tr.find("td:eq(7)>input").val();

            data.push(JSON.stringify(obj));
        });
        $("#tableAlterForm>input[name='columns']").val(data.toString());
        $("#tableAlterForm").submit();
    }
    function changeType(obj) {
        if (obj.value == "BIGINT" || obj.value == "DOUBLE" || obj.value == "FLOAT" || obj.value == "INTEGER" || obj.value == "NUMERIC" || obj.value == "DECIMAL") {
            $(obj).parents("tr").find("input[name='columnAutoIncr']").removeAttr("disabled");
        } else {
            $(obj).parents("tr").find("input[name='columnAutoIncr']").attr("disabled", "disabled");
            $(obj).parents("tr").find("input[name='columnAutoIncr']").prop("checked", false);
        }
    }
    $(function () {
        $("#tableAlterForm").ajaxForm({
            beforeSubmit: function (arr, $form, options) {
                $form.find(".btn-parsley").button("loading");
            },
            success: function (data, statusText, xhr, $form) {
                if (data.success == true) {
                    Toast.success("Alter Success!");
                } else {
                    Toast.error(data.message);
                }
                $form.find(".btn-parsley").button("reset");
            }
        });
        template = $("#columns>tbody>tr:first").clone();
    });

</script>

#loading_close
</body>
</html>
